<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违概况</text></view>
				</template>
				<view class="m-b-10">
					<my-grid :list="list" :col="4"></my-grid>
				</view>
				<my-grid :list="list1" :col="4"></my-grid>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违返还报表</text></view>
				</template>
				<!-- <view class="p-6 b-r-4 m-b-10 flex m-between" style="background: #f5f7fe">
					<view class="m-l-10">待返还金额</view>
					<view class="flex m-r-10">
						<up-count-to bold :endVal="22600" fontSize="16" color="#0052D9" class="m-r-5" />
						<view>元</view>
					</view>
				</view> -->
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违条款统计</text></view>
				</template>
				<!-- <u-tabs
					lineWidth="30"
					lineColor="#2172FC"
					:list="[{ name: '采掘' }, { name: '机电' }]"
					:activeStyle="{ color: '#2172FC', fontWeight: 'bold' }"
					@click="opts1Fn"
					:current="current"
				/> -->
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违事件类型统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违危害类型统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="6" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违管理考核排名</text></view>
				</template>
				<!-- <view class="flex s-center m-b-5">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索..." v-model="searchVal" bgColor="#f5f9fd" @clear="() => {}" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" text="搜索" />
				</view> -->
				<my-table :data="tableData" :columns="columns" emptyText="暂无数据" style="height: 300px;">
					<template #index={$index}>{{$index+1}}</template>
				</my-table>
			</u-collapse-item>
			<u-collapse-item name="7" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违员工考核排名</text></view>
				</template>
				<!-- <view class="flex s-center m-b-5">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索..." v-model="searchVal1" bgColor="#f5f9fd" @clear="() => {}" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" text="搜索" />
				</view> -->
				<my-table :data="tableData1" :columns="columns1"  emptyText="暂无数据" style="height: 300px;" >
					<template #index={$index}>{{$index+1}}</template>
				</my-table>
			</u-collapse-item>
			<u-collapse-item name="8" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三违区队考核排名</text></view>
				</template>
				<!-- <view class="flex s-center m-b-5">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索..." v-model="searchVal2" bgColor="#f5f9fd" @clear="() => {}" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" text="搜索" />
				</view> -->
				<my-table :data="tableData2" :columns="columns2" emptyText="暂无数据" style="height: 300px;">
					<template #index={$index}>{{$index+1}}</template>
				</my-table>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { computed, nextTick, reactive, ref } from 'vue';
import { 
	getItemCount,getEventCount,getDamageCount, getTodayCount, getYearCount,
	getHomeReturn,getLeaderPage, getLeaderWorkerPage,getTeamControlPage} from '@/api/manage.js';
import { onShow } from '@dcloudio/uni-app';
import date from '@/utils/date.js';

const newDate = ref(date(new Date(), 'YYYY-MM'));
const showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7, 8]);
let list = computed(()=>{
	return [
		{
			title: '今日三违总数量',
			value: todayCount.value.total,
			unit: '次'
		},
		{
			title: '一般',
			value: todayCount.value.label1,
			unit: '次'
		},
		{
			title: '严重',
			value: todayCount.value.label2,
			unit: '次'
		},
		{
			title: '重大',
			value: todayCount.value.label3,
			unit: '次'
		}
	]
	}),
	list1 = computed(()=>{
		return [
			{
				title: '今年三违总数量',
				value: yearCount.value.total,
				unit: '次'
			},
			{
				title: '一般',
				value: yearCount.value.label1,
				unit: '次'
			},
			{
				title: '严重',
				value: yearCount.value.label2,
				unit: '次'
			},
			{
				title: '重大',
				value: yearCount.value.label3,
				unit: '次'
			}
		]
	});

let chartData = ref({}),
	opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		type: 'line',
		padding: [0, 0, 0, 0],
		dataLabel: false,
		dataPointShape: true,
		legend: {
			position: 'top',
			margin: 10
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			rotateLabel: true,
			rotateAngle: 50,
		},
		yAxis: {
			gridType: 'dash',
			showTitle: true,
			data: [
				{
					min: 0,
					axisLine: false,
					title: '次数',
					titleOffsetX: -10,
					titleOffsetY: -5
				}
			]
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
			}
		}
	};

let chartData1 = ref({}),
	chartData1Total= ref(0),
	opts1 = computed(()=>{
		return{
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 0
			},
			title: {
				name: chartData1Total.value,
				fontSize: 30,
				color: '#000',
				offsetY: -5
			},
			subtitle: {
				name: '总数',
				fontSize: 15,
				color: '#000'
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
					border: true,
					borderWidth: 3,
					borderColor: '#FFFFFF'
				}
			}
		};
	})
	
const current = ref(0);
function opts1Fn() {}

let chartData2 = ref({}),
	chartData2Total= ref(0),
	opts2 = computed(()=>{
		return {
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 0
			},
			title: {
				name: chartData2Total.value,
				fontSize: 30,
				color: '#000',
				offsetY: -5
			},
			subtitle: {
				name: '总数',
				fontSize: 15,
				color: '#000'
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
					border: true,
					borderWidth: 3,
					borderColor: '#FFFFFF'
				}
			}
		}
	});

let chartData3 = ref({}),
	chartData3Total= ref(0),
	opts3 = computed(()=>{
		return {
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 0
			},
			title: {
				name: chartData3Total.value,
				fontSize: 30,
				color: '#000',
				offsetY: -5
			},
			subtitle: {
				name: '总数',
				fontSize: 15,
				color: '#000'
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
					border: true,
					borderWidth: 3,
					borderColor: '#FFFFFF'
				}
			}
		}
	});

const searchVal = ref();
const tableData = ref();
const columns = [
	{
		label:'排序',
		prop: 'index',
		width: '50'
	},
	{
		label: '姓名',
		prop: 'name',
		width: '70'
	},
	{
		label: '职位',
		prop: 'dutiesName',
		width: '70'
	},
	{
		label: '一般',
		prop: 'label1',
		width: '50'
	},
	{
		label: '严重',
		prop: 'label2',
		width: '50'
	},
	{
		label: '重大',
		prop: 'label3',
		width: '50'
	}
];

const searchVal1 = ref();
const tableData1 = ref();
const columns1 = [
	{
		label: '排名',
		prop: 'index',
		width: '50'
	},
	{
		label: '姓名',
		prop: 'name',
		width: '70'
	},
	{
		label: '岗位',
		prop: 'dutiesName',
		width: '70'
	},
	{
		label: '一般',
		prop: 'label1',
		width: '50'
	},
	{
		label: '严重',
		prop: 'label2',
		width: '50'
	},
	{
		label: '重大',
		prop: 'label3',
		width: '50'
	}
];

const searchVal2 = ref();
const tableData2 = ref();
const columns2 = [
	{
		label: '排名',
		prop: 'index',
		width: '50'
	},
	{
		label: '区队',
		prop: 'teamName',
		width: '70'
	},
	{
		label: '一般',
		prop: 'label1',
		width: '50'
	},
	{
		label: '严重',
		prop: 'label2',
		width: '50'
	},
	{
		label: '重大',
		prop: 'label3',
		width: '50'
	}
];

function getServerData() {
	//模拟从服务器获取数据时的延时
	setTimeout(() => {
		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		let res = {
			categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
			series: [
				{
					name: '成交量A',
					data: [35, 8, 25, 37, 4, 20],
					lineStyle: {
						// 设置线条透明度
						opacity: 0.5,
					},
				},
				{
					name: '成交量B',
					data: [70, 40, 65, 100, 44, 68]
				},
				{
					name: '成交量C',
					data: [100, 80, 95, 150, 112, 132]
				}
			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));

		let res1 = {
			series: [
				{
					data: [
						{ name: '一班', value: 50, labelText: '一班:' + 501 },
						{ name: '二班', value: 30 },
						{ name: '三班', value: 20 },
						{ name: '四班', value: 18 },
						{ name: '五班', value: 8 }
					]
				}
			]
		};
		// chartData1.value = JSON.parse(JSON.stringify(res1));
		// chartData2.value = JSON.parse(JSON.stringify(res1));
		// chartData3.value = JSON.parse(JSON.stringify(res1));
	}, 500);
}

const yearCount =ref({})
const todayCount =ref({})
const collapse = ref(null)
function loadData(){
	const Fn1 = getTodayCount().then(res=>{
		let list  = res.data
		todayCount.value = {
			total:list.find(item=>item?.todayTotal)?list.find(item=>item?.todayTotal)?.todayTotal:0,
			label1:list.find(item=>item?.damage?.includes('一般'))?list.find(item=>item?.damage?.includes('一般'))?.num:0,
			label2:list.find(item=>item?.damage?.includes('严重'))?list.find(item=>item?.damage?.includes('严重'))?.num:0,
			label3:list.find(item=>item?.damage?.includes('重大'))?list.find(item=>item?.damage?.includes('重大'))?.num:0
		}
	})
	const Fn2 = getYearCount().then(res=>{
		let list  = res.data;
		yearCount.value = {
			total:list.find(item=>item?.todayTotal)?list.find(item=>item?.todayTotal)?.todayTotal:0,
			label1:list.find(item=>item?.damage?.includes('一般'))?list.find(item=>item?.damage?.includes('一般'))?.num:0,
			label2:list.find(item=>item?.damage?.includes('严重'))?list.find(item=>item?.damage?.includes('严重'))?.num:0,
			label3:list.find(item=>item?.damage?.includes('重大'))?list.find(item=>item?.damage?.includes('重大'))?.num:0
		}
	})	
	
	const Fn3 = getItemCount().then(res=>{
		chartData1.value={
			series: [
				{
					data: res.data.map(item=>{
						return{
							name:item.name,
							value:item.value
						}
					})
				}
			]
		}
		chartData1Total.value = res.data.map(item=>item.value).reduce((sum,cur)=>sum+cur,0)
	})
	const Fn4 = getEventCount().then(res=>{
		chartData2.value={
			series: [
				{
					data: res.data.map(item=>{
						return{
							name:item.name,
							value:item.value
						}
					})
				}
			]
		}
		chartData2Total.value = res.data.map(item=>item.value).reduce((sum,cur)=>sum+cur,0)
	})
	const Fn5 = getDamageCount().then(res=>{
		chartData3.value={
			series: [
				{
					data: res.data.map(item=>{
						return{
							name:item.name,
							value:item.value
						}
					})
				}
			]
		}
		chartData3Total.value = res.data.map(item=>item.value).reduce((sum,cur)=>sum+cur,0)
	})

	const Fn6 = getLeaderPage({pageNum: 1,pageSize: 999999,checkControlTime:newDate.value }).then(res=>{
		res.data.rows.map((item) => {
			item.label1 = item.labelMap.label1;
			item.label2 = item.labelMap.label2;
			item.label3 = item.labelMap.label3;
		});
		tableData.value = res.data.rows
	})
	const Fn7 = getLeaderWorkerPage({pageNum: 1,pageSize: 999999,checkControlTime:newDate.value }).then(res=>{
		res.data.rows.map((item) => {
			item.label1 = item.labelMap.label1;
			item.label2 = item.labelMap.label2;
			item.label3 = item.labelMap.label3;
		});
		tableData1.value  = res. data.rows.sort(function(a,b){
			return b.finishNum - a.finishNum
		})
	})
	const Fn8 = getTeamControlPage({pageNum: 1,pageSize: 999999,checkControlTime:newDate.value }).then(res=>{
		res.data.rows.map((item) => {
			item.label1 = item.labelMap.label1;
			item.label2 = item.labelMap.label2;
			item.label3 = item.labelMap.label3;
		});
		tableData2.value  = res. data.rows.sort(function(a,b){
			return b.finishNum - a.finishNum
		})
	})
	
	const Fn9 = getHomeReturn().then(res=>{
		let month = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',]
		let list = {
			alreadyReturn: new Array(12).fill(0),
			canReturn: new Array(12).fill(0),
			unReturn: new Array(12).fill(0)
		}
		res.data.forEach(item => {
			let dataMonth = item.nowMonth ? new Date(item.nowMonth).getMonth() + 1 : undefined
			if(!dataMonth) return;
			list.alreadyReturn[dataMonth - 1] = item.alreadyReturn
			list.canReturn[dataMonth - 1] = item.canReturn
			list.unReturn[dataMonth - 1] = item.unReturn
		})
		
		chartData.value={
			categories:month ,
			series: [
				{
					name: '已返还',
					data: list.alreadyReturn,
				},
				{
					name: '待返回',
					data: list.canReturn,
				},
				{
					name: '返还条件不满足',
					data: list.unReturn,
				}
			]
		}
	})
	
	// 在所有接口的数据返回后重置高度collapse
	Promise.allSettled([Fn1, Fn2, Fn3, Fn4, Fn5, Fn6, Fn7, Fn8, Fn9]).then(_ => {
		nextTick(() => {
			collapse.value.init()
		})
	})
}

onShow(() => {
	// getServerData();
	
	setTimeout(()=>{
		loadData()
	},500)
	
	
});
</script>

<style lang="scss" scoped>
:deep {
	.u-grid {
		.u-grid-item {
			width: 20% !important;
		}
		:first-child {
			flex: 4;
		}
	}
}
</style>
